<template>
	
		<view class="content">
			<view class="title">
				<view class="hangde" @tap="tap(index)" v-for="(item,index) in list" :key="index" :class="[current==index?'active':'']">
					{{item.title}}
				</view>
			</view>
			
			
			 <swiper class="swiper-box1" :current="current" style="background-color: #0A98D5;">
				 <swiper-item class="swiper-item">
				
					<view class="box1" v-for="(item,index) in daijielist" :key="index">
						
						<image class="image1" :src="item.img"></image>
						<view>{{item.leixing}}</view>
						<view>库存：{{item.kucun}}</view>
						<view class="ziti1">
							<view style="color: #FF3333;font-size: 20px;">￥：{{item.jiage}}</view>
							<image class="image2" style="width: 20px;height: 20px;" src="../../../static/icon/加.png"></image>
						</view>
						
					</view>
					
				 </swiper-item>
				<!-- 外机配件 -->
				<swiper-item class="swiper-item">
									 
									<view class="box1" v-for="(item,index) in daijielist" :key="index">
										
										<image class="image1" :src="item.img"></image>
										<view>{{item.leixing}}</view>
										<view>库存：{{item.kucun}}</view>
										<view class="ziti1">
											<view style="color: #FF3333;font-size: 20px;">￥：{{item.jiage}}</view>
											<image class="image2" style="width: 20px;height: 20px;" src="../../../static/icon/加.png"></image>
										</view>
										
									</view>
				</swiper-item>
				<!-- 电机类 -->
				 <swiper-item class="swiper-item">
				 					 
				 					<view class="box1" v-for="(item,index) in daijielist" :key="index">
				 						
				 						<image class="image1" :src="item.img"></image>
				 						<view>{{item.leixing}}</view>
				 						<view>库存：{{item.kucun}}</view>
				 						<view class="ziti1">
				 							<view style="color: #FF3333;font-size: 20px;">￥：{{item.jiage}}</view>
				 							<image class="image2" style="width: 20px;height: 20px;" src="../../../static/icon/加.png"></image>
				 						</view>
				 						
				 					</view>
				 </swiper-item>
				<!-- 管道类 -->
				 <swiper-item class="swiper-item">
				 					 
				 					<view class="box1" v-for="(item,index) in daijielist" :key="index">
				 						
				 						<image class="image1" :src="item.img"></image>
				 						<view>{{item.leixing}}</view>
				 						<view>库存：{{item.kucun}}</view>
				 						<view class="ziti1">
				 							<view style="color: #FF3333;font-size: 20px;">￥：{{item.jiage}}</view>
				 							<image class="image2" style="width: 20px;height: 20px;" src="../../../static/icon/加.png"></image>
				 						</view>
				 						
				 					</view>
				 </swiper-item>
			 </swiper> 
			
			<!-- <swiper :current="current" class="tap-label">
				<swiper-item class="swiper-item">
					<view v-for="(item,index) in daijielist" :key="index">
			        
			
					</view>
			
				</swiper-item> -->
			
				<!-- <swiper-item>
					<view v-for="(item,index) in daijielist" :key="index">
						{{ item.leixing }}{{item.leixtime}}
					</view>
			
				</swiper-item> -->
			
		<!-- 	</swiper> -->
			
			
			
			
			
		</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				currrntlist: [],
				list: [{
						title: "内机配件",
					},
					{
						title: "外机配件",
					},
					{
						title: "电机类",
					},
					{
						title: "管道类",
					}
				],
				daijielist: [{
					
								img: '../../../static/peijianku/neiji2.jpg',
								leixing: "内机配件1",
								kucun: "40",
								jiage: "70"
						
							},
							{
								img: '../../../static/peijianku/neiji1.jpg',
								leixing: "内机配件2",
								kucun: "140",
								jiage: "90"
							},
							{
								img: '../../../static/peijianku/neiji1.jpg',
								leixing: "内机配件2",
								kucun: "140",
								jiage: "90"
							}
				],			
			}
		},

		methods: {
			tap(index) {
				this.current = index //点击切换选项卡
			}
		}
	}
</script>

<style lang="scss">
	.box1{
		width: 50%;
		//text-align: center;				
		border:13rpx solid #ffffff;
		box-sizing:border-box;
		//display: flex;
	}
	.swiper-box1{
		//height: 100vh;
		//background-color: #00ff7f;
		//height: 700px;
		//width: 100%;
		//overflow: hidden;
		
	}
	.image2 {
		margin-left: 80px;
		text-align: center;
	}

	.ziti1 {
		display: flex;

	}

	.image1 {
		width: 150px;
		height: 120px;
		margin-top: 5%;
		margin-left: 5%;
		margin-right: 5%;
	}

	.title {
		background-color: #FFFFFF;
		display: flex;
		border-bottom: 1px solid #DDDDDD;
		 font-size: 17px;
		 line-height: 40px;
		 text-align: center;

		 .hangde {
			width: 50%;	
		}
	}
.active {
		background: #2cdbab;
		color: #FFFFFF;
	}
	.content {
		background: #F8F8F8;
		
	}

	.swiper-item {
		//border:1px solid black; 
		//background-color: #f8f8f8;
		//padding: 1rpx;
		//display: flex;
	}

	
</style>
